<template>
  <div class="page-select" v-loading="loading">
    <el-header class="banner">
      <div class="logoBox pull-left">
        <img class="logo_zhi cwdgj-img" style="width:150px;margin-left:20px" src="../assets/images/logo_cwdgj.svg" alt />
      </div>
      <ul class="pull-right">
        <li @click="ChIsVtu = true">
          <span class="blackFont" style="font-size: 15px;">
            <i style="font-size: 20px" class="iconfont hoverToBlue">&#xe69d;</i>
            <!-- <span style="position: relative;top: -2px;;margin-left: 3px;">退出</span> -->
          </span>
        </li>

      </ul>
    </el-header>
    <div class="content">
      <div class="box" v-for="(item, index) in list" :key="index">
        <div class="bg">
          <div class="avatar iconfont">&#xe697;</div>
          <div class="title">{{item.companyName}}</div>
        </div>
        <div class="form">
          <div class="item">
            <div class="label">企业号</div>
            <div class="value">{{item.companyNumber}}</div>
          </div>
          <div class="item">
            <div class="label">企业管理员</div>
            <div class="value">{{item.managerName}}</div>
          </div>
          <div class="item">
            <div class="label">联系电话</div>
            <div class="value">{{item.managerPhone}}</div>
          </div>
          <div class="item">
            <div class="label">账套数</div>
            <div class="value">{{item.accountUsedCount}}</div>
          </div>
        </div>
        <div class="btns">
          <el-badge :value="item.pendingExamine" :hidden="!item.pendingExamine" class="item">
            <div class="btn1">
              <!-- <div class="icon iconfont">&#xe642;</div> -->
              <img class="btn-img" src="../assets/images/icon_dsp.png" alt="">
              <div class="name">待审批</div>
            </div>
          </el-badge>
          <div class="s-line"></div>
          <el-badge :value="item.copyRecipients" :hidden="!item.copyRecipients" class="item">
            <div class="btn1">
              <!-- <div class="icon iconfont">&#xe642;</div> -->
              <img class="btn-img" src="../assets/images/icon_csw.png" alt="">
              <div class="name">抄送我的</div>
            </div>
          </el-badge>
        </div>
        <div class="btn">
          <el-button type="primary" @click="login(item)"> 进入企业 </el-button>
        </div>
      </div>

    </div>
    <div class="footer">
      <el-pagination :small="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageIndex" :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="退出登录" :visible.sync="ChIsVtu" width="330px">
      <p style="padding: 45px;text-align: center;">确定退出登录吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ChIsVtu = false">取 消</el-button>
        <el-button type="primary" @click="wheTerQuit">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import useLogin from './login/mixins/useLogin';
import { OPEN_URL, quitLogin } from './config';

export default {
  name: 'select',
  mixins: [useLogin],
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      params: {
        pageIndex: 1,
        pageSize: 3
      },
      total: 3,
      list: [],
      ChIsVtu: false,
      loading: false
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    wheTerQuit() {
      quitLogin();
    },
    async getData() {
      this.loading = true;
      const { data } = await this.$api.optionsManage.GetCompanyRelatedData({ ...this.form, ...this.params });
      const { items, totalCount } = data.data;
      this.list = items, this.total = totalCount;
      this.loading = false;
    },
    async login(item) {
      const { companyNumber, userId, companyName } = item;
      window.open(`${OPEN_URL}?companyNumber=${window.btoa(companyNumber)}&userId=${window.btoa(userId)}&companyName=${companyName}`);
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getData();

    },
    handleCurrentChange(val) {
      this.params.pageIndex = val;
      this.getData();

    }
  }
};
</script>

<style scoped lang="less">
.page-select {
  // padding: 30px 30px;
  // padding-bottom: 30px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f6f7fb;
  .cwdgj-img {
    width: 140px;
    height: 80px;
  }
  .content {
    padding: 0 30px;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .box {
      min-width: 384px;
      margin: 0 30px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      min-height: 80%;
      display: flex;
      flex-direction: column;
      // width: 30%;
      // height: 70%;
      .bg {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: url("../assets/images/guanli.png");
        padding: 30px 80px;
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #fff;
          margin-bottom: 20px;
          text-align: center;
          line-height: 50px;
          color: #61b2eb;
          font-size: 30px;
        }
        .title {
          color: #fff;
        }
      }
      .form {
        padding: 20px 40px;
        flex: 1;
        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          .label {
            color: #a7a7a7;
          }
          .value {
            color: #333;
          }
        }
      }
      .btns {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 20px 30px;
        .s-line {
          width: 1px;
          height: 50px;
          background: #a7a7a750;
        }
        .btn1 {
          text-align: center;
          .btn-img {
            width: 35px;
            height: 35px;
          }
          .icon {
            font-size: 30px;
          }
        }
      }
      .btn {
        padding: 20px 0;
        background: #f7f8fc;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .footer {
    width: 100%;
    text-align: right;
    padding: 0 30px;
    padding-top: 5px;
  }
  .pagination {
  }
}
</style>
